<template>
<el-row>
  <el-col :span="12">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>健康打卡</span>
      </div>
      <div class="text item">
        <el-form :model="mapLocation" :rules="rules" ref="mapLocation" label-width="100px" class="demo-mapLocation" size="mini">
          <el-form-item label="健康码状态" prop="type">
            <el-radio-group v-model="mapLocation.type">
              <el-radio label="绿色"></el-radio>
              <el-radio label="黄色"></el-radio>
              <el-radio label="红色"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label=" 当前身体状况" prop="status">
            <el-radio-group v-model="mapLocation.status">
              <el-radio label="健康"></el-radio>
              <el-radio label="确诊"></el-radio>
              <el-radio label="疑似"></el-radio>
              <el-radio label="医学观察"></el-radio>
              <el-radio label="可疑(发热隔离)"></el-radio>
              <el-radio label="治愈"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="当前体温" prop="temperature">
            <el-input v-model="mapLocation.temperature" placeholder="请输入体温(℃)">
              <template slot="append">℃</template>
            </el-input>
          </el-form-item>
          <el-form-item label="本人是否发热" prop="selfFever">
            <el-radio-group v-model="mapLocation.selfFever">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="本人是否咳嗽" prop="selfCough">
            <el-radio-group v-model="mapLocation.selfCough">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="家人是否发热" prop="familyFever">
            <el-radio-group v-model="mapLocation.familyFever">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="家人是否咳嗽" prop="familyCough">
            <el-radio-group v-model="mapLocation.familyCough">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-autocomplete
                v-model="mapLocation.address"
                :fetch-suggestions="querySearch"
                placeholder="请输入您现处详细地址"
                style="width: 300px"
                :trigger-on-focus="false"
                @select="handleSelect"
                prop="address"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('mapLocation')">打卡</el-button>
            <el-button @click=" ('mapLocation')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </el-col>
  <el-col :span="12">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>最近一次打卡记录</span>
      </div>
      <div id="map-container">
        <el-descriptions title="用户信息">
            <el-descriptions-item label="姓名">{{recentRecord.username}}</el-descriptions-item>
            <el-descriptions-item label="体温">{{recentRecord.temperature}}</el-descriptions-item>
            <el-descriptions-item label="身体状况">
              <el-tag :class="tag_color" size="small">{{recentRecord.status}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="3" label="打卡时间">{{recentRecord.punchDate}}</el-descriptions-item>
            <el-descriptions-item :span="3" label="打卡地址">{{recentRecord.address}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </el-col>
  <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>所在位置</span>
        </div>
        <div id="map-container">
          <baidu-map  class="map" :scroll-wheel-zoom="true" :center="mapCenter" :zoom="mapZoom" @ready="handler">
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          </baidu-map>
        </div>
      </el-card>
  </el-col>
</el-row>

</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "Punch",
  data() {
    var checkTemperature = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入您的体温'));
      }
      if (value > 35 && value < 45) {
        callback();
      } else {
        callback(new Error('体温异常！'));
      }
    }
    return {
      mapCenter: {lng: 0, lat: 0},
      mapZoom: 15,
      mapLocation: {
        type: '',
        status: '',
        temperature: '',
        selfFever: '',
        selfCough: '',
        familyFever: '',
        familyCough: '',
        address: undefined,
        coordinate: undefined,
      },
      rules: {
        type: [{required: true, message: '请选择健康码颜色', trigger: 'change'}],
        status: [{required: true, message: '请选择当前身体状况',  trigger: 'change'}],
        temperature: [{validator: checkTemperature, required: true, trigger: 'blur'}],
        selfFever: [{required: true, message: '请选择是否发烧',trigger: 'change'}],
        selfCough: [{required: true, message: '请选择是否咳嗽',trigger: 'change'}],
        familyFever: [{required: true, message: '请选择家人是否发烧',trigger: 'change'}],
        familyCough: [{required: true, message: '请选择家人是否咳嗽',trigger: 'change'}],
        address: [{required: true, message: '地址不能为空', trigger: 'blur'}]
      },
    }
  },

  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
        this.mapCenter.lng = this.mapLocation.coordinate.lng
        this.mapCenter.lat = this.mapLocation.coordinate.lat
        this.mapZoom = 15
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))
      } else {
        this.mapCenter.lng = 114.39801
        this.mapCenter.lat = 30.48593
        this.mapZoom = 10
      }
    },
    querySearch(queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function (point) {
        if (point) {
          that.mapLocation.coordinate = point
          that.makerCenter(point)
        } else {
          that.mapLocation.coordinate = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = {value: x.address + x.title, point: x.point}
              s.push(item)
              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    handleSelect(item) {
      var {point} = item
      this.mapLocation.coordinate = point
      this.makerCenter(point)
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays()
        this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 15
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.dispatch("punch", this.mapLocation)
          this.$router.push("/punchrecord")
        } else {
          console.log('error submit!!')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.$store.dispatch("recentRecord");
  },
  computed: {
    ...mapState({
      recentRecord: (state) => state.home.recentRecord,
      tag_color: (state) => state.home.tag_color
    })
  }
}
</script>

<style lang="less" scoped>
  .text {
    font-size: 14px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin-top: 20px;
    margin-left: 10px;
  }
  .map {
    width: 100%;
    height: 300px;
  }
  .tag_green {
     background: #b2f590;
     color: #000;
  }
  .tag_red {
     background: #ee2b2b;
     color: #000;
  }
</style>

